<template>
  <div class="chat-view">
    <div class="left-view">
      <a-comment>

        <template #actions>
          <span key="comment-nested-reply-to">Reply to</span>
        </template>
        <template #author>
          <a>南絮</a>
        </template>
        <template #avatar>
          <a-avatar src="https://pic.imgdb.cn/item/6645cb2ad9c307b7e989c9cb.jpg" alt="南絮" />
        </template>
        <template #content>
          <p>
            这两个玉镯看起来好精致呀！！！高颜值，高品质，材质和外观一看就很上档次，非常喜欢happy！
          </p>
          <div>
            <a-image src="https://pic.imgdb.cn/item/6645cb2bd9c307b7e989cd28.png" :style=imgStyle />
            <a-image src="https://pic.imgdb.cn/item/6645cb26d9c307b7e989c3e7.png" :style=imgStyle />
          </div>
        </template>
        <a-comment>
          <template #actions>
            <span>Reply to</span>
          </template>
          <template #author>
            <a>南风知我意</a>
          </template>
          <template #avatar>
            <a-avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />
          </template>
          <template #content>
            <p>
              真的好好看！
            </p>
          </template>

          <a-comment>
            <template #actions>
              <span>Reply to</span>
            </template>
            <template #author>
              <a>青石巷</a>
            </template>
            <template #avatar>
              <a-avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />
            </template>
            <template #content>
              <p>
                性价比超高，包装也很高端大气上档次，值得购买。
              </p>
            </template>
          </a-comment>

          <a-comment>
            <template #actions>
              <span>Reply to</span>
            </template>
            <template #author>
              <a>烟微</a>
            </template>
            <template #avatar>
              <a-avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />
            </template>
            <template #content>
              <p>
                一直以来特别喜欢玉，倍儿棒，客服服务态度特别好，推荐给所有喜欢玉的朋友。
              </p>
              <div>
                <img src="../assets/social/photo4.png" class="photo" />
              </div>
            </template>
          </a-comment>
        </a-comment>
      </a-comment>
<!-- 
      <a-comment>
        <template #actions>
          <span>Reply to</span>
        </template>
        <template #author>
          <a>阿豪</a>
        </template>
        <template #avatar>
          <a-avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />
        </template>
        <template #content>
          <p>
            造型生动，细节处理精细，展现出了高超的雕刻技艺。整体来看，这件作品不仅具有很高的艺术价值，还具有一定的收藏价值。
          </p>
          <div>
            <img src="../assets/social/photo3.png" class="photo" />
          </div>
        </template>
      </a-comment> -->


      <!-- 图片放大 -->
      <!-- <div v-if="zoomImageSrc" class="zoom-overlay" @click="zoomImageSrc = null">
      <img :src="zoomImageSrc" alt="Zoomed Image" class="zoomed-image" />
  </div> -->
    </div>


    <div class="right-view">
      <!-- 日历组件 -->
      <a-comment>
        <div
          :style="{ width: '340px', border: '1px solid #d9d9d9', borderRadius: '4px', position: 'absolute', top: '0px', right: '0px' }">
          <a-calendar v-model:value="value" :fullscreen="false" @panelChange="onPanelChange" />
        </div>
      </a-comment>
      <!-- 输入框 -->
      <div class="input-view">
        <a-list v-if="comments.length" :data-source="comments"
          :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`" item-layout="horizontal">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-comment :author="item.author" :avatar="item.avatar" :content="item.content"
                :datetime="item.datetime" />
            </a-list-item>
          </template>
        </a-list>
        <a-comment>
          <template #avatar>
            <a-avatar src="https://joeschmoe.io/api/v1/random" alt="Han Solo" />
          </template>
          <template #content>
            <a-form-item>
              <a-textarea v-model:value="value1" :rows="4" />
            </a-form-item>
            <a-form-item>
              <a-button html-type="submit" :loading="submitting" type="primary" @click="handleSubmit">
                Add Comment
              </a-button>
            </a-form-item>
          </template>
        </a-comment>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { ref } from 'vue';
import { Dayjs } from 'dayjs';

const value = ref<Dayjs>();
const onPanelChange = (value: Dayjs, mode: string) => {
  console.log(value, mode);
};
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
dayjs.extend(relativeTime);

type Comment = Record<string, string>;

const comments = ref<Comment[]>([]);
const submitting = ref<boolean>(false);
const value1 = ref<string>('');
const handleSubmit = () => {
  if (!value1.value) {
    return;
  }

  submitting.value = true;

  setTimeout(() => {
    submitting.value = false;
    comments.value = [
      {
        author: 'Han Solo',
        avatar: 'https://joeschmoe.io/api/v1/random',
        content: value1.value,
        datetime: dayjs().fromNow(),
      },
      ...comments.value,
    ];
    value1.value = '';
  }, 1000);
};

const imgStyle = ref({
  width: '200px',
  height: '200px',
  marginRight: '20px',
  marginTop: '10px'
});

</script>


<style scoped>
.left-view {
  height: 1500px;
  width: 1000px;
  float: left;
  /* border: 1px solid ; */
  border-right: 1px solid;
  margin: auto;
  border-radius: 5px;
  padding-left: 30px;
  border-color: #DDDDDD;
}

.right-view {
  height: 500px;
  width: 340px;
  float: right;
  /* border: 1px solid ; */
  margin: auto;
  border-radius: 5px;
  border-color: #DDDDDD;
}

.chat-view {
  height: 1600px;
  width: 1350px;
  border: 1px solid;
  margin: auto;
  border-radius: 5px;
  border-color: #DDDDDD;
}

.input-view {
  width: 300px;
  display: inline-block;
  position: relative;
  top: 300px;
  right: 0px;

}

.pagination {
  position: relative;
  bottom: 0px;
}

#photo {
  width: 200px;
  height: 200px;
  margin-right: 20px;
  margin-top: 10px;
}
</style>